<template>
  <div class="page-title">
    <div class="page-title-content">
      <h2>{{ title }}</h2>
      <!-- <div class="city" v-if="city_show">
        选择城市：
        <CitySelect :value="city" @onChange="changeCity" />
      </div> -->
    </div>
    <el-divider />
  </div>
</template>

<script>
// import CitySelect from '@/components/CitySelect'
export default {
  name: 'PageTitle',
  components: {
    // CitySelect
  },
  computed: {},
  props: {
    title: {
      type: String,
      default: ''
    },
    city_show: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      city: '1'
    }
  },
  methods: {
    changeCity(e) {
      this.city = e
      this.$emit('onChange', e)
    }
  }
}
</script>
<style scoped lang="less">
.page-title {
  margin: 10px auto;
  &-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    h2 {
      position: relative;
      padding-left: 10px;
      margin: 0;
      &::before {
        content: '';
        width: 4px;
        height: 20px;
        background-color: #718aeb;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
      }
    }
  }
  .el-divider--horizontal {
    margin: 20px 0;
  }
  .city {
    display: flex;
    align-items: center;
  }
}
</style>
